/*
*   @Author: 1296
*   @Date: 2025-03-21
*   @Description: 系统设置
*/

<script>
import ConfirmModal from '@/components/ConfirmModal.vue'
import AccountManagement from '@/components/settings/AccountManagement.vue'
import LanguageSettings from '@/components/settings/LanguageSettings.vue'
import HelpCenter from '@/components/settings/HelpCenter.vue'
import About from '@/components/settings/About.vue'
import resetPassword from '@/components/settings/resetPassword.vue'

export default {
  components: {
    ConfirmModal,
    AccountManagement,
    LanguageSettings,
    HelpCenter,
    About,
    resetPassword
  },
  data() {
    return {
      showLogoutConfirm: false,
      activeMenu: 'account',
      currentComponent: 'AccountManagement',
      menuMap: {
        language: { component: 'LanguageSettings', menu: 'language' },
        account: { component: 'AccountManagement', menu: 'account' },
        help: { component: 'HelpCenter', menu: 'help' },
        about: { component: 'About', menu: 'about' },
        resetPassword: { component: 'resetPassword', menu: 'resetPassword' }
      }
    }
  },
  methods: {
    logout() {
      sessionStorage.removeItem('id');
      sessionStorage.removeItem('userToken');
      sessionStorage.removeItem('username');
      sessionStorage.removeItem('avatar');
      sessionStorage.removeItem('phone');
      sessionStorage.removeItem('gender');
      sessionStorage.removeItem('email');
      sessionStorage.removeItem('institute');
      sessionStorage.removeItem('major');
      sessionStorage.removeItem('className');
      sessionStorage.removeItem('role');
      sessionStorage.removeItem('locale');
      this.$store.commit('CLEAR_USER');
      this.$i18n.locale = 'zh-CN';
      this.$router.push('/');
    },
    confirmLogout() {
      this.showLogoutConfirm = true;
    },
    changeMenu(componentName, menuName) {
      this.currentComponent = componentName;
      this.activeMenu = menuName;
      // 同步更新URL参数
      this.$router.replace({
        query: { ...this.$route.query, section: menuName }
      });
    },
    updateSection(section) {
      if (section && this.menuMap[section]) {
        this.currentComponent = this.menuMap[section].component;
        this.activeMenu = this.menuMap[section].menu;
      } else {
        // 默认显示账号管理
        this.currentComponent = 'AccountManagement';
        this.activeMenu = 'account';
      }
    }
  },
  created() {
    this.updateSection(this.$route.query.section);
  },
  watch: {
    '$route'(to) {
      this.updateSection(to.query.section);
    }
  }
}
</script>

<template>
  <div class="layout">
    <ConfirmModal
        v-model:show="showLogoutConfirm"
        :message="$t('confirmToLogout')"
        @confirm="logout"
    />

    <div class="sidebar">
      <nav class="nav-bar">
        <ul class="nav-list">
          <!-- 国际化导航菜单 -->
          <li
              class="nav-item"
              :class="{ active: activeMenu === 'account' }"
              @click="changeMenu('AccountManagement', 'account')"
          >
            {{ $t('accountManagement') }}
          </li>
          <li
              class="nav-item"
              :class="{ active: activeMenu === 'language' }"
              @click="changeMenu('LanguageSettings', 'language')"
          >
            {{ $t('languageSettings') }}
          </li>
          <li
              class="nav-item"
              :class="{ active: activeMenu === 'resetPassword' }"
              @click="changeMenu('resetPassword','resetPassword')"
          >
            {{ $t('login.resetPassword') }}
          </li>
          <li
              class="nav-item"
              :class="{ active: activeMenu === 'help' }"
              @click="changeMenu('HelpCenter', 'help')"
          >
            {{ $t('helpCenter') }}
          </li>
          <li
              class="nav-item"
              :class="{ active: activeMenu === 'about' }"
              @click="changeMenu('About', 'about')"
          >
            {{ $t('about') }}
          </li>
        </ul>
        <div class="logout" @click="confirmLogout">
          <span>{{ $t('logout') }}</span>
        </div>
      </nav>
    </div>
    <div class="content">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<style scoped>
.nav-item.active {
  background: rgba(15,64,245,0.1) !important;
  color: #0f40f5 !important;
  font-weight: 500;
}

.nav-item.active:hover {
  background: rgba(15,64,245,0.15) !important;
}

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 14vw;
  height: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #ffffff 0%, rgba(15,64,245,0.6) 100%);
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
  position: relative;
}

.nav-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2vh 0;
}

.nav-list {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  padding: 1.2vh 2vw;
  margin: 0.8vh 1.2vw;
  font-size: 1vw;
  display: block;
  line-height: 1.5;
  border-radius: 0.6vw;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  color: #333;
  background: transparent;
}

.nav-item:hover {
  background: rgba(15,64,245,0.08);
  transform: translateX(4px);
}

.logout {
  margin-top: auto;
  padding: 1.2vh 0 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.logout span {
  display: block;
  padding: 1.2vh 2vw;
  margin: 0.8vh 1.2vw;
  font-size: 1vw;
  line-height: 1.5;
  border-radius: 0.6vw;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #666;
}

.logout span:hover {
  background: rgba(255,0,0,0.08);
  color: #ff4444;
  transform: translateX(4px);
}

.content {
  flex: 1;
  padding: 4vh 2vw;
  background: #f8f9fa;
}

@media (max-width: 768px) {
  .sidebar {
    width: 25vw;
    min-width: 180px;
  }

  .nav-item {
    font-size: calc(12px + 0.3vw);
    padding: 1vh 1.5vw;
  }
}

@media (max-width: 480px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    min-height: 60vh;
  }

  .nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nav-item {
    flex: 1 1 45%;
    text-align: center;
    margin: 0.5vh 1vw;
  }
}
</style>